<template>
    <div>
        <template v-for="(item, index) in props.menus">
            <Submenu v-if="item.children && item.children.length > 0" :name="item.name" :key="index">
                <template #title>
                    <Icon :type="item.icon" />
                    {{ item.title }}
                </template>
                <recurve-menu :menus="item.children"></recurve-menu>
            </Submenu>
            <MenuItem v-else :key="item.index" :name="item.name" :to="item.path">
            <Icon :type="item.icon"></Icon>
            <span>{{ item.text }}</span>
            </MenuItem>
        </template>
    </div>
</template>
<script>
export default {
  name: "recurve-menu"
}
</script>
<script setup>
const props = defineProps({
    menus: {type: Array, default: ()=>[]}
});
</script>